<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
   <meta charset="utf-8" />
   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <!-- Mobile viewport optimized: h5bp.com/viewport -->
   <meta name="viewport" content="width=device-width">

   <title>Wide · BootMetro</title>

   <meta name="robots" content="noindex, nofollow">
   <meta name="description" content="MetroUI-Web : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface." />
   <meta name="keywords" content="metro, metroui, metro-ui, metro ui, windows 8, metro style, bootstrap, framework, web framework, css, html" />
   <meta name="author" content="AozoraLabs by Marcello Palmitessa"/>
   
   <!-- remove or comment this line if you want to use the local fonts -->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

   <link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootstrap-responsive.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-tiles.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-charms.css">
   <link rel="stylesheet" type="text/css" href="content/css/metro-ui-light.css">
   <link rel="stylesheet" type="text/css" href="content/css/icomoon.css">

   <!--  these two css are to use only for documentation -->
   <link rel="stylesheet" type="text/css" href="content/css/demo.css">
   <link rel="stylesheet" type="text/css" href="scripts/google-code-prettify/prettify.css" >

   <!-- Le fav and touch icons -->
   <link rel="shortcut icon" href="content/ico/favicon.ico">
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="content/ico/apple-touch-icon-144-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="content/ico/apple-touch-icon-114-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="content/ico/apple-touch-icon-72-precomposed.png">
   <link rel="apple-touch-icon-precomposed" href="content/ico/apple-touch-icon-57-precomposed.png">
  
   <!-- All JavaScript at the bottom, except for Modernizr and Respond.
      Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
      For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
   <script src="scripts/modernizr-2.6.1.min.js"></script>

   <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3182578-6']);
      _gaq.push(['_trackPageview']);
      (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
   </script>
</head>

<body data-accent="blue">
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

   <!-- Header
   ================================================== -->
   <header id="nav-bar" class="container-fluid">
      <div class="row-fluid">
         <div class="span8">
            <div id="header-container">
               <a id="backbutton" class="win-backbutton" href="./tiles-templates.html"></a>
               <h5>BootMetro</h5>
               <div class="dropdown">
                  <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
                     Wide Tiles Templates
                     <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                  <li><a href="./hub.html">Hub</a></li>
                  <li><a href="./tiles-templates.html">Tile Templates</a></li>
                  <li><a href="./listviews.html">ListViews</a></li>
                  <li><a href="./appbar-demo.html">Demo App-Bar</a></li>
                  <li><a href="./table.html">Demo Table</a></li>
                  <li><a href="./icons.html">Icons</a></li>
                  <li><a href="./scaffolding.html">Bootstrap Scaffolding</a></li>
                  <li><a href="./base-css.html">Bootstrap Base CSS</a></li>
                  <li><a href="./components.html">Bootstrap Components</a></li>
                  <li><a href="./javascript.html">Bootstrap Javascript</a></li>
                  <li class="divider"></li>
                  <li><a href="./index.html">Home</a></li>
               </ul>
            </div>
            </div>
         </div>
         <div id="top-info" class="pull-right">
         <a href="#" class="pull-left">
            <div class="top-info-block">
               <h3>FirstName</h3>
               <h4>LastName</h4>
            </div>
            <div class="top-info-block">
               <b class="icon-user"></b>
            </div>
         </a>
         <hr class="separator pull-left"/>
         <a id="settings" class="pull-left" href="#">
            <b class="icon-settings"></b>
         </a>
      </div>
   </div>
   </header>
   
   <div class="container-fluid">
      <div class="subnav">
         <ul class="nav nav-pills">
            <li><a href="#textonly">Wide Text Only Tiles</a></li>
            <li><a href="#imageonly">Wide Image Only Tiles</a></li>
            <li><a href="#imageandtext">Wide image-and-text Tiles</a></li>
         </ul>
      </div>
   </div>
   
   <div class="container-fluid metro">
      <div class="row-fluid">
         <div class="span12">
   
   
            <table id="apptile" class="table">
               <caption><h3>App Tile</h3></caption>
               <thead>
                  <tr>
                     <th>Template Name</th>
                     <th>Description</th>
                     <th>Tile</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td><strong>Wide App Tile</strong></td>
                     <td></td>
                     <td>
                        <a class="tile wide app" href="#">
                           <div class="image-wrapper">
                              <img src="content/img/Windows 8.png" alt=""/>
                           </div>
                           <div class="app-label">AppName</div>
                           <div class="app-count">12</div>
                        </a>
                     </td>
                  </tr>
               </tbody>
            </table>
   
   
   
            <table id="textonly" class="table">
               <caption><h3>Wide Text Only Tiles</h3></caption>
               <thead>
                  <tr>
                     <th>Template Name</th>
                     <th>Description</th>
                     <th>Tile</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td><strong>TileWideText01</strong></td>
                     <td>One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="text-header">Header</div>
                           <div class="text">Text field 1</div>
                           <div class="text">Text field 2</div>
                           <div class="text">Text field 3</div>
                           <div class="text">Text field 4</div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideText02</strong></td>
                     <td>One header string in larger text over eight short strings arranged in two columns of four lines each. Columns are of equal width.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="text-header">Header</div>
                           <div class="column">
                              <div class="text">Text field 1</div>
                              <div class="text">Text field 2</div>
                              <div class="text">Text field 3</div>
                              <div class="text">Text field 4</div>
                           </div>
                           <div class="column">
                              <div class="text">Text field 5</div>
                              <div class="text">Text field 6</div>
                              <div class="text">Text field 7</div>
                              <div class="text">Text field 8</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideText03</strong></td>
                     <td>One string of large text wrapped over a maximum of three lines.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="text-header3">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula</div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideText04</strong></td>
                     <td>One string of regular text wrapped over a maximum of five lines.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="text5">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideText05</strong></td>
                     <td>Five strings of regular text on five lines. Text does not wrap.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="text">Text field 1 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
                           <div class="text">Text field 2 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
                           <div class="text">Text field 3 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
                           <div class="text">Text field 4 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
                           <div class="text">Text field 5 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideText06</strong></td>
                     <td>Ten short strings of regular text, arranged in two columns of five lines each. Columns are of equal width.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="column">
                              <div class="text">Text field 1</div>
                              <div class="text">Text field 2</div>
                              <div class="text">Text field 3</div>
                              <div class="text">Text field 4</div>
                           </div>
                           <div class="column">
                              <div class="text">Text field 5</div>
                              <div class="text">Text field 6</div>
                              <div class="text">Text field 7</div>
                              <div class="text">Text field 8</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideText07</strong></td>
                     <td>One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText10, but the first column is wider.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="text-header">Header</div>
                           <div class="column2-label">
                              <div class="text">label 1</div>
                              <div class="text">label 2</div>
                              <div class="text">label 3</div>
                              <div class="text">label 4</div>
                           </div>
                           <div class="column2-text">
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideText08</strong></td>
                     <td>Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText11, but the first column is wider.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="column2-label">
                              <div class="text">label 1</div>
                              <div class="text">label 2</div>
                              <div class="text">label 3</div>
                              <div class="text">label 4</div>
                              <div class="text">label 5</div>
                           </div>
                           <div class="column2-text">
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideText09</strong></td>
                     <td>One header string in larger text over one string of regular text wrapped over a maximum of four lines.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="text-header">Header</div>
                           <div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideText10</strong></td>
                     <td>One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText07, but the first column is narrower.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="text-header">Header</div>
                           <div class="column3-label">
                              <div class="text">Viva</div>
                              <div class="text">Viva</div>
                              <div class="text">Viva</div>
                              <div class="text">Viva</div>
                           </div>
                           <div class="column3-text">
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideText11</strong></td>
                     <td>Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText08, but the first column is narrower.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="column3-label">
                              <div class="text">Viva</div>
                              <div class="text">Viva</div>
                              <div class="text">Viva</div>
                              <div class="text">Viva</div>
                           </div>
                           <div class="column3-text">
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                              <div class="text">Vivamus elementum semper nisi</div>
                           </div>
                        </a>
                     </td>
                  </tr>
               </tbody>
            </table>
   
   
            <table id="imageonly" class="table">
               <caption><h3>Wide Image Only Tiles</h3></caption>
               <thead>
                  <tr>
                     <th>Template Name</th>
                     <th>Description</th>
                     <th>Tile</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td><strong>TileWideImage</strong></td>
                     <td>One wide image that fills the entire tile, no text.</td>
                     <td>
                        <a class="tile wide image" href="#">
                           <img src="content/img/tile-wide.jpg" alt=""/>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideImageCollection</strong></td>
                     <td>One large square image with four smaller square images to its right, no text.</td>
                     <td>
                        <a class="tile wide image collection" href="#">
                           <img class="tile-image-main" src="content/img/sample1.png" alt=""/>
                           <div class="mini-tiles">
                              <img src="content/img/tile-wide-collection-1.jpg" alt=""/>
                              <img src="content/img/tile-wide-collection-2.png" alt=""/>
                              <img src="content/img/tile-wide-collection-3.gif" alt=""/>
                              <img src="content/img/tile-wide-collection-4.png" alt=""/>
                           </div>
                        </a>
                     </td>
                  </tr>
   
               </tbody>
            </table>
   
   
            <table id="imageandtext" class="table">
               <caption><h3>Wide image-and-text templates</h3></caption>
               <thead>
                  <tr>
                     <th>Template Name</th>
                     <th>Description</th>
                     <th>Tile</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td><strong>TileWideImageAndText01</strong></td>
                     <td>One wide image over one string of regular text wrapped over a maximum of two lines.</td>
                     <td>
                        <a class="tile wide imagetext wideimage" href="#">
                           <img src="content/img/tile-wide.jpg" alt=""/>
                           <div class="textover-wrapper">
                              <div class="text2">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideImageAndText02</strong></td>
                     <td>One wide image over one string of regular text wrapped over a maximum of two lines.</td>
                     <td>
                        <a class="tile wide imagetext wideimage" href="#">
                           <img src="content/img/tile-wide.jpg" alt=""/>
                           <div class="textover-wrapper">
                              <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                              <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideBlockAndText01</strong></td>
                     <td>Four strings of regular, unwrapped text on the left; large block text over a single, short string of bold, regular text on the right.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="column-text">
                              <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                              <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                              <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                              <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           </div>
                           <div class="column-text-big">
                              <div class="text-big">22</div>
                              <div class="text">Aliquam</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideBlockAndText02</strong></td>
                     <td>One string of regular text wrapped over a maximum of four lines on the left; large block text over a single, short string of bold, regular text on the right.</td>
                     <td>
                        <a class="tile wide text" href="#">
                           <div class="column-text">
                              <div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           </div>
                           <div class="column-text-big">
                              <div class="text-big">22</div>
                              <div class="text">Aliquam</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideSmallImageAndText01</strong></td>
                     <td>On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.</td>
                     <td>
                        <a class="tile wide imagetext" href="#">
                           <div class="image-wrapper">
                              <img src="content/img/tile-wide-collection-3.gif" alt=""/>
                           </div>
                           <div class="column-text">
                              <div class="text-header3">Adipisci velit, sed quia non numquam eius modi tempora.</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideSmallImageAndText02</strong></td>
                     <td>On the left, one small image; on the right, one header string in larger text on the first line over four strings of regular text on the next four lines. Text does not wrap.</td>
                     <td>
                        <a class="tile wide imagetext" href="#">
                           <div class="image-wrapper">
                              <img src="content/img/tile-wide-collection-3.gif" alt=""/>
                           </div>
                           <div class="column-text">
                              <div class="text-header">Adipisci velit, sed quia non numquam eius modi tempora.</div>
                              <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                              <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                              <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                              <div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                          </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideSmallImageAndText03</strong></td>
                     <td>On the left, one small image; on the right, one string of regular text wrapped over a maximum of five lines.</td>
                     <td>
                        <a class="tile wide imagetext" href="#">
                           <div class="image-wrapper">
                              <img src="content/img/tile-wide-collection-3.gif" alt=""/>
                           </div>
                           <div class="column-text">
                              <div class="text5">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                          </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileWideSmallImageAndText04</strong></td>
                     <td>On the left, one small image; on the right, one header string in larger text on the first line over four strings of regular text on the next four lines. Text does not wrap.</td>
                     <td>
                        <a class="tile wide imagetext" href="#">
                           <div class="image-wrapper">
                              <img src="content/img/tile-wide-collection-3.gif" alt=""/>
                           </div>
                           <div class="column-text">
                              <div class="text-header">Adipisci velit, sed quia non numquam eius modi tempora.</div>
                              <div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                          </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>[TODO] TileWideSmallImageAndText05</strong></td>
                     <td>On the left, one header string in larger text over one string of regular text wrapped over a maximum of four lines; on the right, one small image with 3:4 dimensions.</td>
                     <td>
                        <a class="tile tilewideblockandtext02" href="#">
                           <div class="tile-column">
                              <img src="content/img/tile-wide.jpg" alt=""/>
                           </div>
                        </a>
                     </td>
                  </tr>
   
               </tbody>
            </table>
   
         </div>
      </div>
   </div>   <div id="charms" class="win-ui-dark">
   
      <div id="theme-charms-section" class="charms-section">
         <div class="charms-header">
            <a href="#" class="close-charms win-command">
               <span class="win-commandimage win-commandring">&#xe05d;</span>
            </a>
            <h2>Settings</h2>
         </div>
   
         <div class="row-fluid">
            <div class="span12">
   
               <form class="">
                  <label for="win-theme-select">Change theme:</label>
                  <select id="win-theme-select" class="">
                     <option value="metro-ui-semilight">Semi-Light</option>
                     <option value="metro-ui-light">Light</option>
                     <option value="metro-ui-dark">Dark</option>
                  </select>
               </form>
   
            </div>
         </div>
      </div>
   
   </div>

   <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script>window.jQuery || document.write("<script src='scripts/jquery-1.8.2.min.js'>\x3C/script>")</script>

   <script type="text/javascript" src="scripts/google-code-prettify/prettify.js"></script>
   <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
   <script type="text/javascript" src="scripts/jquery.scrollTo.js"></script>
   <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
   <script type="text/javascript" src="scripts/bootmetro.js"></script>
   <script type="text/javascript" src="scripts/bootmetro-charms.js"></script>
   <script type="text/javascript" src="scripts/demo.js"></script>
   <script type="text/javascript" src="scripts/holder.js"></script>

   <script type="text/javascript">
      $(".metro").metro();
   </script>
</body>
</html>
